/* eslint-disable */
<template> 
  <div class="myEdit">
    <el-form :model=" form " class=" ">
        <el-form-item label=" 修改头像" :label-width=" formLabelWidth " class=" mb-2 pr-5 ">
            <el-upload
            class=" avatar-uploader2 "
            action=" https://jsonplaceholder.typicode.com/posts/ "
            :show-file-list=" false " >
            <img v-if=" imageUrl " :src=" imageUrl " class=" avatar2 ">
            <i v-else class=" el-icon-plus avatar-uploader-icon2 "></i>
          </el-upload>
          <p class=" m-0 small text-secondary"> 建议尺寸：450*450px </p>
        </el-form-item>
        <el-form-item label=" 用户昵称 " :label-width=" formLabelWidth " class=" mb-2 pr-5 ">
            <el-input v-model=" form.nickname " autocomplete=" off "></el-input>
        </el-form-item> 
        <el-divider class=" border-light-1 mt-0 mb-2 "></el-divider>
        <el-form-item label=" 入会设置 " :label-width=" formLabelWidth " class=" mb-2 ">
        <el-checkbox-group v-model=" form.type ">
            <el-checkbox label=" 在会议主持人进入前，参会人将暂时进入等候室 " name=" type " class=" mb-1 "></el-checkbox>
            <el-checkbox label=" 会议开始时，启用演讲者模式 " name=" type " class=" mb-1 "></el-checkbox> 
          </el-checkbox-group>
        </el-form-item>
    </el-form>
    <el-divider class=" border-light-1 mt-0 "></el-divider>
    <div slot="footer" class=" dialog-footer text-center "> 
        <el-button @click="editUser= false ">取 消</el-button>
        <el-button type="primary" @click="editUser = false ">确 定</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'MyEdit',
        data() {
            return {
                imageUrl: '', // 上传头像图片 
                form: {
                    nickname: '',
                    type: [],
                },
                formLabelWidth: '90px'
            }
        }

    }
</script>

<style>
    .avatar-uploader2 .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .avatar-uploader2 .el-upload:hover {
        border-color: #409EFF;
    }
    
    .avatar-uploader-icon2 {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    
    .avatar2 {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>